See here for the example code that generated this page
Gif Examples
This page demonstrates the interactive Gif chart type in JSPlots.
- Frame-by-frame control: Navigate through GIF frames with precision
- Interactive controls: Play/pause, previous/next frame, speed control
- Loop control: Toggle looping on/off
- Filtering: Switch between different GIFs while maintaining frame position
- Keyboard shortcuts: ← → for frame navigation, Space for play/pause, L for loop toggle
Example 1: Basic Gif from Directory Pattern
This example loads GIF files from a directory following the pattern: prefix!group1!group2!...!groupN.gif
The GIFs below were created with the pattern: animation!Region!Quarter.gif
Features:
- Automatic detection of filter groups from filename structure
- Play/Pause controls with frame-by-frame navigation
- Speed slider (0.05s to 5s per frame on log scale)
- Loop toggle checkbox
- Keyboard shortcuts: ← → for frames, Space for play/pause, L for loop
- Frame preservation: When you change filters, the viewer jumps to the same frame number in the new GIF
Animated Plots by Region and Quarter
Use filters to switch between regions and quarters. Notice how the frame position is preserved when switching!
Filters
Keyboard shortcuts: ← Prev Frame, → Next Frame, Space Play/Pause, L Toggle Loop
Example 2: Gif with Autoplay Enabled
This example demonstrates the autoplay feature. The GIF starts playing automatically when the page loads.
Try the following:
- Let it play automatically for a few frames
- Click "Pause" to stop it
- Use "Prev Frame" and "Next Frame" to navigate manually
- Change the filter to see a different animation (frame position will be preserved!)
- Adjust the speed slider to control playback speed
- Uncheck "Loop" to make it play only once
Autoplay Example - Spiral Animation
This GIF starts playing automatically. Try changing filters while it's playing!
Filters
Keyboard shortcuts: ← Prev Frame, → Next Frame, Space Play/Pause, L Toggle Loop
Example 3: Fast Animation with Short Delay
This example uses a very short delay (0.05s) for rapid playback.
The speed slider allows you to adjust from 0.05s to 5s per frame using a logarithmic scale.
Fast Animation - Cosine Wave
This animation plays quickly. Use the speed slider to slow it down if needed.
Filters
Keyboard shortcuts: ← Prev Frame, → Next Frame, Space Play/Pause, L Toggle Loop
Summary
The Gif chart type provides:
- Frame-by-frame control: Navigate through GIF frames precisely with Previous/Next buttons
- libgif.js integration: Client-side GIF parsing for true frame control
- Play controls: Play/Pause with adjustable speed (logarithmic scale from 0.05s to 5s)
- Loop control: Toggle looping on/off with checkbox or 'L' key
- Filter groups: Organize multiple GIFs by categories
- Frame preservation: Maintains frame position when switching between GIFs
- Keyboard shortcuts:
- Left Arrow: Previous frame
- Right Arrow: Next frame
- Space: Play/Pause toggle
- L: Loop toggle
- Data format support: Works with both embedded (base64) and external storage
Use Cases
- Animated data visualizations (time series, simulations)
- Step-by-step tutorials or walkthroughs
- Before/after comparisons with transitions
- Scientific animations (physics simulations, molecular dynamics)
- Algorithm visualizations